<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <script type="text/javascript" src="./js/phaser.js"></script>
  <script type="text/javascript" src="./js/demo.js"></script>
</head>
<body>
  <div id="game"></div>
</body>
<script type="text/javascript">
FrauenVsRefugees.VOLUME = 0.3
      FrauenVsRefugees.MUSIC_VOLUME = 0.1;
      FrauenVsRefugees.GFX = true;
      FrauenVsRefugees.TOUCH = document.documentElement.className.indexOf("no-touchevents") == -1;




      //  100% of the browser window - see Boot.js for additional configuration
      //FrauenVsRefugees.SAFE_ZONE_WIDTH = Math.max(800, window.innerWidth);// * window.devicePixelRatio;
      //FrauenVsRefugees.SAFE_ZONE_HEIGHT = Math.max(550, window.innerHeight);// * window.devicePixelRatio;

      //FrauenVsRefugees.SAFE_ZONE_WIDTH = 622;// * window.devicePixelRatio;
      //FrauenVsRefugees.SAFE_ZONE_HEIGHT = 193;// * window.devicePixelRatio;

      FrauenVsRefugees.SAFE_ZONE_WIDTH = window.innerWidth;
      FrauenVsRefugees.SAFE_ZONE_HEIGHT = window.innerHeight;

      FrauenVsRefugees.VIEW_WIDTH = 622;
      FrauenVsRefugees.VIEW_HEIGHT = 193;

      FrauenVsRefugees.VIEW_CENTER_X = FrauenVsRefugees.VIEW_WIDTH / 2;
      FrauenVsRefugees.VIEW_CENTER_Y = FrauenVsRefugees.VIEW_HEIGHT / 2;

FrauenVsRefugees.extendObject = function (target, source) { //Object.prototype.extend messes with phaser
        target = target || {};
        source = source || {};
        for (var prop in source) {
           target[prop] = source[prop];
        }
        return target;
      }

      FrauenVsRefugees.SoundManager = {

        knownSounds : {},

        play : function(sound, canPlayAfter)
        {
          var t = new Date().getTime();
          if(this.knownSounds[sound.key] == undefined || t  - this.knownSounds[sound.key] > canPlayAfter)
          {
            this.knownSounds[sound.key] = t;
            sound.play();
          }
          
        }

      }
FrauenVsRefugees.createViewWindow = function()
      {
        var viewWindow = new ParentSprite();
        game.add.existing(viewWindow);
        
        var s = (game.width) / FrauenVsRefugees.VIEW_WIDTH;
        var w = Math.round(FrauenVsRefugees.VIEW_WIDTH * s); //i know its the same as game.width ;)
        var h = Math.round(FrauenVsRefugees.VIEW_HEIGHT * s);
        viewWindow.scale.set(s, s);

        viewWindow.y = Math.round(game.height / 2 - (h / 2));


        FrauenVsRefugees.VIEW_WINDOW_SCALE = s;

        var mask = game.add.graphics(0, 0);
        mask.beginFill(0x000000);
        mask.drawRect(0, 0, w, h);
        mask.endFill();
        mask.x = viewWindow.x;
        mask.y = viewWindow.y;
        mask.fixedToCamera = true;
        viewWindow.mask = mask;


        var frameGraphics = game.add.graphics(0, 0);    
        frameGraphics.lineStyle(2, 0xffffff, 1);


        
        //frameGraphics.drawRect(0, 0, FrauenVsRefugees.VIEW_WIDTH, FrauenVsRefugees.VIEW_HEIGHT);
        frameGraphics.moveTo(0,0);
        frameGraphics.lineTo(w, 0);
        frameGraphics.moveTo(0, h - 1);
        frameGraphics.lineTo(w, h - 1);
        frameGraphics.fixedToCamera = true;
        frameGraphics.cameraOffset.x = viewWindow.x;
        frameGraphics.cameraOffset.y = viewWindow.y;

        viewWindow.filterArea = new Phaser.Rectangle(mask.x, mask.y, w, h);

        return viewWindow;
      }
  var game = new Phaser.Game(800, 600, Phaser.CANVAS, "game");
  game.state.add('Preload', FrauenVsRefugees.Preload );
  game.state.add('Settings', FrauenVsRefugees.Settings  );
  game.state.add('Win', FrauenVsRefugees.Win);
  game.state.add('Loose', FrauenVsRefugees.Loose);
  game.state.add('Boot', FrauenVsRefugees.Boot);
  game.state.add('Game', FrauenVsRefugees.Game);
  game.state.add('Intro', FrauenVsRefugees.Intro);
  game.state.start('Boot');


</script>
</html>